<template>
  <div class="${domain}">
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
      class="layout-content"
    >
      <a-space>
        <a-button type="primary" @click="flush"> 刷新 </a-button>
        <a-button type="primary" @click="openAdd"> 新增 </a-button>
      </a-space>

      <!-- 新增${tableNameCn}模态窗口 -->
      <a-modal
        v-model="visible"
        :title="isEdit ? '编辑${tableNameCn}' : '新增${tableNameCn}'"
        @ok="handleOk"
        cancelText="取消"
        okText="确认"
        :closable="closable"
        @cancel="handleCancel"
      >
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-item label="id" hidden>
            <a-input v-decorator="['id']" />
          </a-form-item>
          <#list fieldList as field>
          <#if field.nameHump != "createTime" && field.nameHump != "updateTime">
          <#if field.enums>
          <a-form-item label="${field.nameCn}">
            <a-select
            v-decorator="[
              '${field.nameHump}',
              {
                rules: [{ required: ${field.nullAble?string("false", "true")}, message: '请选择${field.nameCn}!' }],
              },
            ]"
            placeholder="请选择${field.nameCn}"
            >
              <a-select-option v-for="item in ${field.nameHump}Items" :key="item.code">
                {{ item.message }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <#elseif field.javaType == 'Date'>
          <a-form-item label="${field.nameCn}">
            <a-config-provider :locale="locale">
            <#if field.type == 'time'>
              <a-date-picker
                v-decorator="['${field.nameHump}', { rules: [{ required: true, message: '请选择${field.nameCn}!' }] },]"
                show-time
                format="HH:mm:ss"
                placeholder="请选择${field.nameCn}"
                mode="time"
                :showToday="showToday"
                valueFormat="HH:mm:ss"
              />
            <#elseif field.type == 'date'>
              <a-date-picker
                v-decorator="['${field.nameHump}', { rules: [{ required: true, message: '请选择${field.nameCn}!' }] },]"
                show-time
                format="YYYY-MM-DD"
                placeholder="请选择${field.nameCn}"
                mode="date"
                :showToday="showToday"
                valueFormat="YYYY-MM-DD"
              />
            <#else>
              <a-date-picker
                v-decorator="['${field.nameHump}', { rules: [{ required: true, message: '请选择${field.nameCn}!' }] },]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择${field.nameCn}"
                :showToday="showToday"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              />
            </#if>
            </a-config-provider>
          </a-form-item>
          <#else>
          <#if field.nameHump != "id">
          <a-form-item label="${field.nameCn}">
            <a-input
            v-decorator="[
              '${field.nameHump}',
              {
                rules: [{ required: ${field.nullAble?string("false", "true")}, message: '请输入${field.nameCn}!' }],
              },
            ]"
            />
          </a-form-item>
          </#if>
          </#if>
          </#if>
          </#list>
        </a-form>
      </a-modal>
      <!-- 列表 -->
      <a-table
        :columns="columns"
        :data-source="data"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :scroll="{ x: 1080, y: 400 }"
        :pagination="pagination"
        @change="handlePage"
        :loading="loading"
      >
        <span slot="action" slot-scope="record">
          <a @click="openEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleRemove(record.id)">删除</a>
        </span>
      </a-table>
    </a-layout-content>
  </div>
</template>

<script>
import { add, getPage, edit, remove } from "@/api/${domain}";
import { notification, Modal } from "ant-design-vue";
import "ant-design-vue/lib/notification/style/css";
import zhCN from "ant-design-vue/es/locale/zh_CN";

export default {
  name: "${domain}",
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      scrollY: 400,
      loading: false,
      closable: false,
      isEdit: false,
      code: "",
      description: "",
      locale: zhCN,
      <#list fieldList as field>
      <#if field.enums>
      ${field.nameHump}Items: window.${field.enumsConst}_ARRAY,
      </#if>
      </#list>
      showToday: true,
      pagination: {
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total, range) =>
          "显示" + range[0] + " ~ " + range[1] + "条记录，共" + total + "条记录",
        pageSize: 10,
        current: 1,
        total: 0,
      },
      columns: [
        <#list fieldList as field>
        <#if field.name != "id">
        <#if field.enums>
        {
          title: "${field.nameCn}",
          dataIndex: "${field.nameHump}",
          key: "${field.nameHump}",
          align: "center",
          width: 150,
          customRender: (text, record, index) => {
            const ${field.nameHump}Item = this.${field.nameHump}Items.find(item => item.code === text);
            return ${field.nameHump}Item ? ${field.nameHump}Item.message : text;
          },
        },
        <#else>
        {
          title: "${field.nameCn}",
          dataIndex: "${field.nameHump}",
          key: "${field.nameHump}",
          align: "center",
          width: 150,
        },
        </#if>
        </#if>
        </#list>
        {
          title: "操作",
          key: "operation",
          fixed: "right",
          width: 110,
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [],
    };
  },
  mounted() {
    this.handlePage();
  },
  methods: {
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        } else {
          this.handleAddOrEdit(values);
        }
      });
    },
    async handleAddOrEdit(values) {
      if (this.isEdit) {
        //发起更新请求
        await edit(values).then((res) => {
          this.description = "${tableNameCn}更新成功";
          this.code = res.code;
        });
      } else {
        //发起新增请求
        await add(values).then((res) => {
          this.description = "${tableNameCn}添加成功";
          this.code = res.code;
        });
      }
      if (this.code === 200) {
        notification.success({
          message: "消息提示",
          description: this.description,
          duration: 2,
        });
        //关闭表单
        this.visible = false;
        //清空表单
        this.form.resetFields();
        //刷新表格
        this.handlePage({
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
        });
      }
    },
    handleCancel(e) {
      this.form.resetFields();
    },
    flush() {
      this.handlePage();
    },
    handlePage(pagination, filters, sorter) {
      this.loading = true;
      const pageNo = pagination === undefined ? 1 : pagination.current;
      const pageSize = pagination === undefined ? 10 : pagination.pageSize;
      getPage(pageNo, pageSize).then((res) => {
        this.loading = false;
        if (res.code === 200) {
          //设置每页码和每页显示数
          this.pagination.current = pageNo;
          this.pagination.pageSize = pageSize;
          //获取结果
          const ${domain}List = res.data.data;
          this.data = ${domain}List;
          this.pagination.total = res.data.total;
        } else {
          notification.error({
            message: "消息提示",
            description: res.message,
            duration: 3,
          });
        }
      });
    },
    openEdit(record) {
      this.isEdit = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          <#list fieldList as field>
          <#if field.nameHump != "createTime" && field.nameHump != "updateTime">
          ${field.nameHump}: record.${field.nameHump},
          </#if>
          </#list>
        });
      });
      this.visible = true;
    },
    openAdd() {
      this.isEdit = false;
      this.visible = true;
    },
    handleRemove(id) {
      Modal.confirm({
        title: "是否确认删除?",
        okText: "是",
        okType: "danger",
        cancelText: "否",
        centered: true,
        onOk: () => {
          remove(id).then((res) => {
            if (res.code === 200) {
              notification.success({
                message: "消息提示",
                description: "乘客删除成功",
                duration: 2,
              });
              this.handlePage({
                current: this.pagination.current,
                pageSize: this.pagination.pageSize,
              });
            } else {
              notification.error({
                message: "消息提示",
                description: res.message,
                duration: 2,
              });
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-input {
  width: 300px;
}
.ant-table-wrapper {
  margin-top: 20px;
}
/deep/ .ant-table-header {
  padding-bottom: 0 !important;
}
/deep/ .ant-select-selection--single {
  width: 110px !important;
}
/deep/ .ant-table-thead > tr > th {
  border-bottom: 0 !important;
}
</style>
